<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">
      <el-form :inline="true" size="small">
        <el-form-item label="日期筛选"><date-picker v-model="queryFrom.time_range"/></el-form-item>
        <el-form-item label="用户类型"><user-type v-model="queryFrom.user_type"/></el-form-item>
        <el-form-item label="玩法类型" size="small">
          <div v-if="['witch', 'loki'].includes($store.state.user.business)">
            <el-select v-model="queryFrom.game_type" placeholder="请选择" @visible-change="viChange">
              <el-option v-for="(value, key) of chooseOptions" :key="key" :label="value.label" :value="value.value"/>
            </el-select>
          </div>
          <select-all v-else :all-select-list="chooseOptions" v-model="queryFrom.game_type" />
        </el-form-item>
        <el-form-item label="参与区间" size="small"><money-range v-model="queryFrom.game_stage_list" :stageTypeList="stageTypeList_"/></el-form-item>
        <el-button size="small" type="primary" @click="sendQuery">提交</el-button>
      </el-form>
    </div>
    <!-- <div><el-button :loading="excelLoad" icon="el-icon-printer" style="float: right;margin: 0 0 10px 0" size="mini" type="success" @click="downExcel" >导出数据</el-button></div> -->
    <analyse-table v-if="showTable" :table-data="tableData" :key_mapper="key_mapper" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-pagination :current-page.sync="page" :page-size="size" :total.sync="total" class="mt-10" layout="total, sizes, prev, pager, next, jumper" @current-change="currentChange" @size-change="handleSizeChange"/>
  </div>
</template>
<script>
  import { stageTypeList_ } from '@/model/'
import { pickTime } from '@/model/DateRange'
import { PlayAbility, getDwcGameType } from '@/api/table' // PlayAbility只改了名称，路径还没改
import mixins from '@/model/mixins'

export default {
  name: 'Active',
  mixins: [mixins],
  data() {
    return {
      stageTypeList_:stageTypeList_,
      queryFrom: {
        game_stage_list: [],
        time_range: pickTime,
        user_type: ''
      },
      API: PlayAbility,
      showTable: true,
      chooseOptions: []
    }
  },
  created() {
    this.getDwcGameType()
  },
  methods: {
    getDwcGameType() {
      getDwcGameType().then(res => {
        if (res.status === 0) {
          // 数组第一层更改键
          this.goodObj = res.data.preset.map(function(item) {
            return {
              value: item.key,
              label: item.name,
              child: item.third_type
            }
          })
          // 数组第一层加键值对 二层改键/加键值对
          this.goodObj.map(function(item) {
            item['name'] = '全选/取消'
            item['CName'] = item.label
            item.child.map(function(item1) {
              item1['value'] = item1.key
              delete item1.key
              item1['CName'] = item1.name
              delete item1.name
              item1['name'] = '全选/取消'
            })
          })
          this.chooseOptions = this.goodObj
        }
      })
    },
  },
  watch: {
    tableData() {
      this.showTable = false
      this.$nextTick(() => (
        this.showTable = true
      ))
    }
  }
}
</script>
